<template>
    <view class="searchBar">
		<image class="left" src="../../static/ty_70.png" mode="widthFix"></image>
		<image class="right" src="../../static/zh_386.png" mode="widthFix"></image>
		<input @click="search" type="text" placeholder="奶茶"/>
    </view>
	<view class="hotSearch">
		<view class="title">
			<text>热门搜索</text>
			<image class="left" src="../../static/sl_671.png" mode="widthFix"></image>
			<image class="right" src="../../static/sl_672.png" mode="widthFix"></image>
		</view>
		<view class="content">
			<view  v-for="(item, index) in list" :key="index" @click="toShopping(item)" class="box">
				<image :src="item.url" mode="widthFix"></image>
				<view class="name">{{ item.name }}</view>
				<view>
					<image style="width: 20rpx;" src="../../static/sl_51.png" mode="widthFix"></image>
					{{ item.value.toFixed(2) }} CNY
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps(['list'])

const search = () => {
	uni.navigateTo({
		url: '/pages/search/search'
	})
}

const toShopping = (item) => {
	uni.setStorageSync("shopping", JSON.stringify(item))
	console.log(JSON.stringify(item));
	uni.navigateTo({
		url: '/pages/shopping/shopping'
	})
}
</script>

<style lang="scss" scoped>
	.searchBar {
		margin-top: 125rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.left {
			width: 42rpx;
			position: absolute;
			left: 70rpx;
		}
		.right {
			width: 26rpx;
			position: absolute;
			right: 80rpx;
			top: 30rpx;
		}
		input {
			background-color: #F4F4F4;
			height: 52rpx;
			width: 500rpx;
			border-radius: 40rpx;
			padding: 20rpx 80rpx;
			
		}
	}
	.hotSearch {
		padding-bottom: 200rpx;
		.title {
			margin: 40rpx 46rpx;
			text {
				font-weight: 550;
				font-size: 40rpx;
			}
			.left {
				width: 27rpx;
				position: absolute;
				right: 125rpx;
				top: 145rpx;
			}
			.right {
				width: 27rpx;
				position: absolute;
				right: 77rpx;
				top: 145rpx;
			}
		}
		
		.content {
			margin: 40rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 25rpx;
			.box {
				// background-color: orange;
				image {
					width: 100%;
				}
			}
		}
	}
</style>
